<template>
  <div class="shopCartCenter clearfix">
    <!-- 没有商品时的购物车状态 -->
    <van-empty
      v-if="!cartInfoList.length"
      class="empty"
      image="https://yanxuan.nosdn.127.net/3a6c77d8463d8675f4a0a0c80dbe4391.png"
      image-size="375px"
      description="购物车空空如也~~ 添加点商品吧"
    />

    <!-- 有商品的时候购物车状态 -->
    <div v-else class="haveShop">
      <!-- 全场换购区域 -->
      <div class="exchangeShop">
        <!-- 头部区域 -->
        <div class="shopHeader">
          <div class="exchangeText1">
            <span class="exchangeWord1">全场换购</span>
          </div>
          <div class="exchangeText2">
            <span class="exchangeWord2">已满1件,可选择10件商品换购</span>
          </div>
          <div class="exchangeText3">
            <span class="exchangeWord3">去换购></span>
          </div>
        </div>
        <!-- 图片区域 -->
        <div class="shopImg">
          <van-swipe>
            <van-swipe-item class="swipeItem" v-for="(item, index) in cartInfoList" :key="index"
              ><img :src="item.imgUrl" alt="" class="swipeImg"
            /></van-swipe-item>
            <template #indicator="{ active, total }">
              <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
            </template>
          </van-swipe>
        </div>
      </div>

      <!-- 99包邮 -->
      <div class="Packagemail">
        <!-- 头部区域 -->
        <div class="shopHeader">
          <div class="packageText1">
            <van-checkbox class="checkbox1" v-model="checked"></van-checkbox>
          </div>
          <div class="packageText2">
            <span class="packageWord2">单件包邮</span>
          </div>
          <div class="packageText3">
            <span class="packageWord3">以下商品已免邮</span>
          </div>
        </div>
        <!-- 商品卡片 -->
        <div class="shopCard">
          <!-- 每个商品卡片 -->
          <div class="shopItem" v-for="(goods, index) in cartInfoList" :key="index">
            <!-- 详细商品 -->
            <van-checkbox v-model="goods.isChecked" class="checked"></van-checkbox>
            <van-swipe-cell class="swipeCell">
              <van-card :price="goods.skuPrice" :desc="goods.skuName" title="手机详情" class="goods-card" :thumb="goods.imgUrl" />
              <template #right>
                <van-button square text="删除" type="danger" class="delete-button" @click="delateGoods(goods.skuId)" />
              </template>
              <van-stepper v-model="goods.skuNum" class="addShop" />
            </van-swipe-cell>
          </div>
        </div>
      </div>

      <!-- 底部结算 -->
      <div class="settlement">
        <div class="submintBar">
          <van-submit-bar :price="priceAll" button-text="结算" @submit="onSubmit">
            <div class="checkbox3">
              <van-checkbox v-model="changeIsCheckedALL">全选</van-checkbox>
            </div>
          </van-submit-bar>
        </div>
      </div>
    </div>

    <TabBar class="tabbar"></TabBar>
  </div>
</template>
<!-- ======================================================================================================= -->
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'ShopCart'
})
</script>
<script lang="ts" setup>
import { onMounted, ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import { useCartStore } from '@/stores/shopCart'
import { storeToRefs } from 'pinia'
// =======================================================
const checked = ref(true)
const router = useRouter()
// 挂载之后就调用
onMounted(() => {
  login()
  goodsList()
})

// 创建仓库实例
const cartStore = useCartStore()
const { cartInfoList } = storeToRefs(cartStore)
// 调用获取接口函数提取数据

const onSubmit = () => {
  cartStore.priceAll(priceAll)
  showToast('点击跳转')
  router.push({
    path: '/shopcart/child'
  })
}

function login() {
  cartStore.userLoginInfo()
}

// 调用商品列表的异步请求函数获取商品列表数据
function goodsList() {
  cartStore.CartListData()
}
// 删除商品的事件
const delateGoods = (skuId: number) => {
  cartStore.DeleteGoods(skuId)
  goodsList()
}
// 全选，反选全部商品的属性计算
const changeIsCheckedALL = computed({
  get: () => {
    return !!cartInfoList.value.length && cartInfoList.value.every((item) => item.isChecked)
  },
  set: (val) => {
    cartInfoList.value.forEach((item) => {
      item.isChecked = val
    })
  }
})
const priceAll = computed({
  get: () => {
    return cartInfoList.value.reduce((prev, item) => {
      if (item.isChecked) {
        prev += item.skuNum * item.skuPrice * 100
      }
      return prev
    }, 0)
  },
  set: (value) => {
    // return cartInfoList.value.forEach((item: any) => (item.isChecked = value))
  }
})
</script>
<!-- ======================================================================================================== -->
<style lang="less" scoped>
.tabbar {
  position: fixed;
  left: 0;
  bottom: 0px;
}

:deep(.van-submit-bar) {
  bottom: 50px;
}
.shopCartCenter {
  height: 100%;
  background-color: beige;
  // 有商品的样式
  .haveShop {
    width: 375px;
    height: 404.83px;
    background-color: beige;

    // 全场换购
    .exchangeShop {
      width: 335px;
      height: 172.99px;
      margin: 10px 20px;
      border-radius: 10px;
      background-color: white;
      .shopHeader {
        height: 43.98px;
        display: flex;
        margin: 0 8px;
        .exchangeText1 {
          width: 64px;
          .exchangeWord1 {
            font-size: 16px;
            line-height: 24px;
          }
        }
        .exchangeText2 {
          width: 206.05px;
          text-align: right;
          .exchangeWord2 {
            font-size: 10px;
            line-height: 18px;
            padding: 0 5px;
          }
        }
        .exchangeText3 {
          width: 44.98px;
          text-align: right;
          .exchangeWord3 {
            font-size: 10px;
            line-height: 18px;
            color: red;
          }
        }
      }
      .shopImg {
        width: 335px;
        height: 117.98px;
        background-color: chartreuse;
        .swipeItem {
          width: 335px;
          height: 117.98px;
          .swipeImg {
            width: 335px;
            height: 117.98px;
          }
        }
        .custom-indicator {
          position: absolute;
          right: 5px;
          bottom: 5px;
          padding: 2px 5px;
          font-size: 12px;
          background: rgba(0, 0, 0, 0.1);
        }
      }
    }
    // 99包邮
    .Packagemail {
      width: 335px;
      margin: 10px 20px;
      border-radius: 10px;
      background-color: white;
      border: 1px solid antiquewhite;
      .shopHeader {
        height: 43.98px;
        display: flex;
        margin: 0 8px;
        .packageText1 {
          width: 20px;
          margin: 3px;
          .checkbox1 {
            line-height: 43.98px;
            padding: 12px 0;
          }
        }
        .packageText2 {
          width: 64px;
          text-align: left;
          .packageWord2 {
            font-size: 16px;
            line-height: 43.98px;
          }
        }
        .packageText3 {
          width: 224.05px;
          text-align: right;
          .packageWord3 {
            font-size: 10px;
            line-height: 43.98px;
          }
        }
      }
      .shopCard {
        .shopItem {
          display: flex;
          .checked {
            padding: 0 10px;
          }
          .swipeCell {
            border-bottom: 1px solid #000;
            margin: 10px 0;
            .addShop {
              float: right;
            }
            .goods-card {
              margin: 0;
              // background-color: white;
            }
            .delete-button {
              height: 100%;
            }
          }
        }
      }
    }
    // 结算区域
    .settlement {
      width: 100%;
      height: 58.98px;
      background-color: beige;
      // display: flex;

      .submintBar {
        width: 60px;
        height: 36px;
      }
      .checkbox3 {
        line-height: 58.98px;
        padding: 0 12px;
        font-size: 16px;
      }
    }
  }
}
</style>
